To pozostałość po czasach Netscape:
Brakujące cyfry są traktowane jako 0 [...]. Nieprawidłowa cyfra jest po prostu interpretowana jako 0. Na przykład wartości # F0F0F0, F0F0F0, F0F0F, #FxFxFx i FxFxFx są takie same.
Pochodzi z wpisu na blogu Trochę tyrady na temat parsowania kolorów w Microsoft Internet Explorer, które szczegółowo opisuje, w tym różne długości wartości kolorów itp.
Jeśli zastosujemy zasady z kolei z wpisu na blogu, otrzymamy:
Zamień wszystkie niepoprawne znaki szesnastkowe na 0:
chucknorris staje się c00c0000000
Dopełnij następną całkowitą liczbę znaków podzielną przez 3 (11 → 12):
c00c 0000 0000
Podziel na trzy równe grupy, gdzie każdy składnik reprezentuje odpowiadający mu składnik koloru RGB:
RGB (c00c, 0000, 0000)
Obetnij każdy z argumentów od prawej strony do dwóch znaków.
Co ostatecznie daje następujący wynik:
RGB (c0, 00, 00) = # C00000 lub RGB (192, 0, 0)
Oto przykład demonstrujący działanie atrybutu bgcolor, aby uzyskać tę „niesamowitą” próbkę koloru:
| chuck norris |
Pan T |
ninjaturtle |
| chore |
bzdury |
trawa |
To również odpowiada na inną część pytania: dlaczego bgcolor = "chucknorr" daje żółty kolor? Cóż, jeśli zastosujemy reguły, ciąg to:
c00c00000 => c00 c00 000 => c0 c0 00 [RGB (192, 192, 0)]
Co daje jasnożółty złoty kolor. Ponieważ ciąg zaczyna się od 9 znaków, tym razem trzymamy drugie „C”, dlatego kończy się na ostatecznej wartości koloru.
Pierwotnie spotkałem się z tym, gdy ktoś wskazał, że możesz zrobić kolor = "gówno" i, cóż, wychodzi brązowy.
|
Przykro mi, że się nie zgadzam, ale zgodnie z zasadami analizy starszej wartości koloru opublikowanej przez @Yuhong Bao, chucknorris NIE równa się # CC0000, ale raczej # C00000, bardzo podobny, ale nieco inny odcień czerwieni. Użyłem dodatku Firefox ColorZilla, aby to sprawdzić.
Zasady mówią:
nadaj łańcuchowi długość będącą wielokrotnością 3, dodając 0s: chucknorris0
rozdziel strunę na 3 równe struny: chuc knor ris0
obetnij każdy ciąg do 2 znaków: ch kn ri
zachowaj wartości szesnastkowe i dodaj 0 w razie potrzeby: C0 00 00
Udało mi się użyć tych reguł, aby poprawnie zinterpretować następujące ciągi:
LuckyCharms
Szczęście
LuckBeALady
LuckBeALadyTonight
Styl Gangnam
AKTUALIZACJA: Pierwotni respondenci, którzy powiedzieli, że kolor to # CC0000, od tego czasu zredagowali swoje odpowiedzi, aby uwzględnić korektę.
|
Większość przeglądarek po prostu zignoruje wszelkie wartości inne niż szesnastkowe w łańcuchu koloru, zastępując cyfry inne niż szesnastkowe zerami.
ChuCknorris tłumaczy się na c00c0000000. W tym momencie przeglądarka podzieli ciąg na trzy równe sekcje, wskazując wartości czerwonego, zielonego i niebieskiego: c00c 0000 0000. Dodatkowe bity w każdej sekcji zostaną zignorowane, co daje wynik końcowy # c00000, który jest czerwonawy.
Uwaga, nie dotyczy to analizowania kolorów CSS, które są zgodne ze standardem CSS.
Czerwonawy
Tak samo jak powyżej
Czarny
|
Powodem jest to, że przeglądarka nie może tego zrozumieć i próbuje jakoś przetłumaczyć to, co może zrozumieć, aw tym przypadku na wartość szesnastkową! ...
chucknorris zaczyna się od c, które jest rozpoznawanym znakiem szesnastkowym, a także konwertuje wszystkie nierozpoznane znaki na 0!
Więc chucknorris w formacie szesnastkowym wygląda następująco: c00c00000000, wszystkie inne znaki stają się 0, a c pozostaje tam, gdzie są ...
Teraz są dzielone przez 3 dla RGB (czerwony, zielony, niebieski) ... R: c00c, G: 0000, B: 0000 ...
Ale wiemy, że poprawna liczba szesnastkowa dla RGB to tylko 2 znaki, czyli R: c0, G: 00, B: 00
Tak więc prawdziwy wynik to:
bgcolor = "# c00000";
Dodałem również kroki na obrazku jako szybkie odniesienie:
|
Przeglądarka próbuje przekonwertować tekst chucknorris na szesnastkowy kod koloru, ponieważ nie jest to prawidłowa wartość.
W chucknorris wszystko oprócz c nie jest prawidłową wartością szesnastkową.
Więc zostanie przekonwertowany na c00c00000000.
Który staje się # c00000, odcieniem czerwieni.
Wydaje się, że jest to problem głównie z Internet Explorer i Opera (12), ponieważ zarówno Chrome (31), jak i Firefox (26) po prostu to ignorują.
P.S. Liczby w nawiasach to wersje przeglądarek, na których testowałem.
Na lżejszą nutę
Chuck Norris nie spełnia standardów internetowych. Zgodność ze standardami sieciowymi
do niego. # BADA55
|
Specyfikacja HTML WHATWG zawiera dokładny algorytm analizowania starszego koloruwartość:
https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value.
Kod Netscape Classic używany do analizowania ciągów kolorów jest open source:
https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155.
Na przykład zwróć uwagę, że każdy znak jest analizowany jako cyfra szesnastkowa, a następnie przenoszony do 32-bitowej liczby całkowitej bez sprawdzania przepełnienia. Tylko osiem cyfr szesnastkowych mieści się w 32-bitowej liczbie całkowitej, dlatego bierze się pod uwagę tylko 8 ostatnich znaków. Po przeanalizowaniu cyfr szesnastkowych na 32-bitowe liczby całkowite są one następnie obcinane do 8-bitowych liczb całkowitych, dzieląc je przez 16, aż zmieszczą się do 8-bitowych, dlatego zera wiodące są ignorowane.
Aktualizacja: ten kod nie jest dokładnie zgodny z tym, co zdefiniowano w specyfikacji, ale jedyną różnicą jest kilka wierszy kodu. Myślę, że to właśnie te linie zostały dodane (w Netscape 4):
if (bytes_per_val> 4)
{
bytes_per_val = 4;
}
|
Odpowiedź:
Przeglądarka spróbuje przekonwertować chucknorris na wartość szesnastkową.
Ponieważ c jest jedynym prawidłowym znakiem szesnastkowym w chucknorris, wartość zamienia się na: c00c00000000 (0 dla wszystkich wartości, które były nieprawidłowe).
Przeglądarka następnie dzieli wynik na 3 grupy: czerwony = c00c, zielony = 0000, niebieski = 0000.
Ponieważ prawidłowe wartości szesnastkowe dla tła html zawierają tylko 2 cyfry dla każdego typu koloru (r, g, b), ostatnie 2 cyfry są obcinane z każdej grupy, pozostawiając wartość rgb c00000, która jest ceglastoczerwonym kolorem.
|
chucknorris zaczyna się od litery c, a przeglądarka odczytuje ją jako wartość szesnastkową.
Ponieważ A, B, C, D, E i F to znaki szesnastkowe.
Przeglądarka konwertuje chucknorris na wartość szesnastkową C00C00000000.
Następnie wartość szesnastkowa C00C00000000 jest konwertowana na format RGB (podzielona przez 3):
C00C00000000 ⇒ R: C00C, G: 0000, B: 0000
Przeglądarka potrzebuje tylko dwóch cyfr do wskazania koloru:
R: C00C, G: 0000, B: 0000 ⇒ R: C0, G: 00, B: 00 ⇒ C00000
Na koniec pokaż bgcolor = C00000 w przeglądarce internetowej.
Oto przykład demonstrujący to:
| chucknorris |
c00c00000000 |
c00000 |
|
Zasady analizowania kolorów w starszych atrybutach obejmują dodatkowe kroki niż te wymienione w istniejących odpowiedziach. Obcięcie komponentu do części 2-cyfrowej jest opisane następująco:
Odrzuć wszystkie postacie z wyjątkiem ostatnich 8
Odrzuć wiodące zera jeden po drugim, jeśli wszystkie składniki mają wiodące zero
Odrzuć wszystkie postacie z wyjątkiem pierwszych 2
Kilka przykładów:
oooFoooFoooF
000F 000F 000F <- wymień, podkład i kawałek
0F 0F 0F <- zera wiodące obcięte
0F 0F 0F <- obcięte do 2 znaków od prawej
oooFooFFoFFF
000F 00FF 0FFF <- wymień, podkład i kawałek
00F 0FF FFF <- zera wiodące obcięte
00 0F FF <- obcięte do 2 znaków od prawej
ABCooooooABCooooooABCoooooo
ABC000000 ABC000000 ABC000000 <- wymień, podkład i kawałek
BC000000 BC000000 BC000000 <- obcięte do 8 znaków od lewej
BC BC BC <- obcięte do 2 znaków od prawej
AoCooooooAoCooooooAoCoooooo
A0C000000 A0C000000 A0C000000 <- wymienić, pad i kawałek
0C000000 0C000000 0C000000 <- obcięte do 8 znaków od lewej
C000000 C000000 C000000 <- początkowe zera obcięte
C0 C0 C0 <- obcięte do 2 znaków od prawej
Poniżej znajduje się częściowa implementacja algorytmu. Nie obsługuje błędów ani przypadków, w których użytkownik wprowadzi prawidłowy kolor.
function parseColor (input) {
// todo: zwróć błąd, jeśli dane wejściowe to „”
input = input.trim ();
// todo: zwraca błąd, jeśli dane wejściowe są „przezroczyste”
// todo: zwraca odpowiedni #rrggbb, jeśli wejście ma nazwany kolor
// todo: return #rrggbb, jeśli dane wejściowe pasują do #rgb
// todo: zamień punkty kodowe Unicode większe niż U + FFFF na 00
if (input.length> 128) {
input = input.slice (0, 128);
}
if (input.charAt (0) === "#") {
input = input.slice (1);
}
input = input.replace (/ [^ 0-9A-Fa-f] / g, "0");
while (input.length === 0 || input.length% 3> 0) {
wejście + = "0";
}
var r = input.slice (0, input.length / 3);
var g = input.slice (input.length / 3, input.length * 2/3);
var b = input.slice (input.length * 2/3);
if (r.length> 8) {
r = r. plaster (-8);
g = g. plaster (-8);
b = b. plaster (-8);
}
while (r.length> 2 && r.charAt (0) === "0" && g.charAt (0) === "0" && b.charAt (0) === "0") {
r = r. plaster (1);
g = g. plaster (1);
b = b. plaster (1);
}
if (r.length> 2) {
r = r. plaster (0,2);
g = g. plaster (0, 2);
b = b. plaster (0, 2);
}
return "#" + r.padStart (2, "0") + g.padStart (2, "0") + b.padStart (2, "0");
}
$ (funkcja () {
$ ("# wejście"). on ("zmień", funkcja () {
var input = $ (this) .val ();
var color = parseColor (input);
var $ cell = $ ("# wynik tbody td");
$ cells.eq (0) .attr ("bgcolor", wejście);
$ cells.eq (1) .attr ("bgcolor", kolor);
varwartość:
https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value.
Kod Netscape Classic używany do analizowania ciągów kolorów jest open source:
https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155.
Na przykład zwróć uwagę, że każdy znak jest analizowany jako cyfra szesnastkowa, a następnie przenoszony do 32-bitowej liczby całkowitej bez sprawdzania przepełnienia. Tylko osiem cyfr szesnastkowych mieści się w 32-bitowej liczbie całkowitej, dlatego bierze się pod uwagę tylko 8 ostatnich znaków. Po przeanalizowaniu cyfr szesnastkowych na 32-bitowe liczby całkowite są one następnie obcinane do 8-bitowych liczb całkowitych, dzieląc je przez 16, aż zmieszczą się do 8-bitowych, dlatego zera wiodące są ignorowane.
Aktualizacja: ten kod nie jest dokładnie zgodny z tym, co zdefiniowano w specyfikacji, ale jedyną różnicą jest kilka wierszy kodu. Myślę, że to właśnie te linie zostały dodane (w Netscape 4):
if (bytes_per_val> 4)
{
bytes_per_val = 4;
}
|
Odpowiedź:
Przeglądarka spróbuje przekonwertować chucknorris na wartość szesnastkową.
Ponieważ c jest jedynym prawidłowym znakiem szesnastkowym w chucknorris, wartość zamienia się na: c00c00000000 (0 dla wszystkich wartości, które były nieprawidłowe).
Przeglądarka następnie dzieli wynik na 3 grupy: czerwony = c00c, zielony = 0000, niebieski = 0000.
Ponieważ prawidłowe wartości szesnastkowe dla tła html zawierają tylko 2 cyfry dla każdego typu koloru (r, g, b), ostatnie 2 cyfry są obcinane z każdej grupy, pozostawiając wartość rgb c00000, która jest ceglastoczerwonym kolorem.
|
chucknorris zaczyna się od litery c, a przeglądarka odczytuje ją jako wartość szesnastkową.
Ponieważ A, B, C, D, E i F to znaki szesnastkowe.
Przeglądarka konwertuje chucknorris na wartość szesnastkową C00C00000000.
Następnie wartość szesnastkowa C00C00000000 jest konwertowana na format RGB (podzielona przez 3):
C00C00000000 ⇒ R: C00C, G: 0000, B: 0000
Przeglądarka potrzebuje tylko dwóch cyfr do wskazania koloru:
R: C00C, G: 0000, B: 0000 ⇒ R: C0, G: 00, B: 00 ⇒ C00000
Na koniec pokaż bgcolor = C00000 w przeglądarce internetowej.
Oto przykład demonstrujący to:
| chucknorris |
c00c00000000 |
c00000 |
|
Zasady analizowania kolorów w starszych atrybutach obejmują dodatkowe kroki niż te wymienione w istniejących odpowiedziach. Obcięcie komponentu do części 2-cyfrowej jest opisane następująco:
Odrzuć wszystkie postacie z wyjątkiem ostatnich 8
Odrzuć wiodące zera jeden po drugim, jeśli wszystkie składniki mają wiodące zero
Odrzuć wszystkie postacie z wyjątkiem pierwszych 2
Kilka przykładów:
oooFoooFoooF
000F 000F 000F <- wymień, podkład i kawałek
0F 0F 0F <- zera wiodące obcięte
0F 0F 0F <- obcięte do 2 znaków od prawej
oooFooFFoFFF
000F 00FF 0FFF <- wymień, podkład i kawałek
00F 0FF FFF <- zera wiodące obcięte
00 0F FF <- obcięte do 2 znaków od prawej
ABCooooooABCooooooABCoooooo
ABC000000 ABC000000 ABC000000 <- wymień, podkład i kawałek
BC000000 BC000000 BC000000 <- obcięte do 8 znaków od lewej
BC BC BC <- obcięte do 2 znaków od prawej
AoCooooooAoCooooooAoCoooooo
A0C000000 A0C000000 A0C000000 <- wymienić, pad i kawałek
0C000000 0C000000 0C000000 <- obcięte do 8 znaków od lewej
C000000 C000000 C000000 <- początkowe zera obcięte
C0 C0 C0 <- obcięte do 2 znaków od prawej
Poniżej znajduje się częściowa implementacja algorytmu. Nie obsługuje błędów ani przypadków, w których użytkownik wprowadzi prawidłowy kolor.
function parseColor (input) {
// todo: zwróć błąd, jeśli dane wejściowe to „”
input = input.trim ();
// todo: zwraca błąd, jeśli dane wejściowe są „przezroczyste”
// todo: zwraca odpowiedni #rrggbb, jeśli wejście ma nazwany kolor
// todo: return #rrggbb, jeśli dane wejściowe pasują do #rgb
// todo: zamień punkty kodowe Unicode większe niż U + FFFF na 00
if (input.length> 128) {
input = input.slice (0, 128);
}
if (input.charAt (0) === "#") {
input = input.slice (1);
}
input = input.replace (/ [^ 0-9A-Fa-f] / g, "0");
while (input.length === 0 || input.length% 3> 0) {
wejście + = "0";
}
var r = input.slice (0, input.length / 3);
var g = input.slice (input.length / 3, input.length * 2/3);
var b = input.slice (input.length * 2/3);
if (r.length> 8) {
r = r. plaster (-8);
g = g. plaster (-8);
b = b. plaster (-8);
}
while (r.length> 2 && r.charAt (0) === "0" && g.charAt (0) === "0" && b.charAt (0) === "0") {
r = r. plaster (1);
g = g. plaster (1);
b = b. plaster (1);
}
if (r.length> 2) {
r = r. plaster (0,2);
g = g. plaster (0, 2);
b = b. plaster (0, 2);
}
return "#" + r.padStart (2, "0") + g.padStart (2, "0") + b.padStart (2, "0");
}
$ (funkcja () {
$ ("# wejście"). on ("zmień", funkcja () {
var input = $ (this) .val ();
var color = parseColor (input);
var $ cell = $ ("# wynik tbody td");
$ cells.eq (0) .attr ("bgcolor", wejście);
$ cells.eq (1) .attr ("bgcolor", kolor);
var